/*
  学习目标：使用actionCreator减少代码，增加代码提示
*/

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addAction, desAction } from './store';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  const { count } = useSelector((state) => state);
  console.log('count -----> ', count);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* 1. Action对象中，使用payload传参； 👍推荐使用payload作为参数的键名 */}
      {/* 使用actionCreator减少代码，增加代码提示 */}
      <button onClick={() => dispatch(addAction(1))}>+1</button>
      <button onClick={() => dispatch(addAction(5))}>+5</button>
      <button onClick={() => dispatch(desAction(1))}>-1</button>
      <button onClick={() => dispatch(desAction(10))}>-10</button>
    </div>
  );
}
